import React from 'react'
import '../css/Unfinished.css'
import eventEmitter from '../event'

class Unfinished extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			message: [],
		}
  }
	componentDidMount() {
		eventEmitter.addListener('sendmessage', (item) => {
			// console.log(item);
			this.state.message.push(item)
			this.setState({
				message: this.state.message,
			})
		})

		eventEmitter.addListener('sendheaders', (item) => {
			console.log(item)
			// this.state.message.push(item)
			// console.log(this.state.message);
			this.state.message.push(item)
			this.setState({
				message: this.state.message,
			})
		})
	}

	render() {
		return (
			<div className="Unfinished">
				<div className="w">
					<h2>
						正在进行 <span className="num">{this.state.message.length}</span>
					</h2>
					<ul className="uu">
						{this.state.message.map((item, index) => {
							return (
								<li key={index}>
									<input
                    type="checkbox"
                    checked ={0}
										onChange={() => {
											
                      eventEmitter.emit('Completed', item)
											this.setState({
												message: this.state.message,
                      })
                      this.state.message.splice(index, 1)
										}}
									/>
									<div>{item.content}</div>{' '}
									<span
										className="del"
										onClick={() => {
											this.state.message.splice(index, 1)
											this.setState({
												message: this.state.message,
											})
										}}
									>
										一
									</span>
								</li>
							)
						})}
					</ul>
				</div>
			</div>
		)
	}
}

export default Unfinished
